<div
  *ngFor="let file of items"
  class="ant-upload-list-item ant-upload-list-item-{{ file.status }}"
  @itemState
>
  <ng-template #icon>
    <ng-container *ngIf="showPic; else noPicTpl">
      <div
        *ngIf="listType === 'picture-card' && file.status === 'uploading'; else thumbUrlCheck"
        class="ant-upload-list-item-uploading-text"
      >
        {{ locale.uploading }}
      </div>
    </ng-container>
    <ng-template #thumbUrlCheck>
      <i
        *ngIf="!file.thumbUrl && !file.url; else thumbTpl"
        class="ant-upload-list-item-thumbnail"
        nz-icon
        nzType="picture"
        nzTheme="twotone"
      ></i>
    </ng-template>
    <ng-template #thumbTpl>
      <a
        class="ant-upload-list-item-thumbnail"
        target="_blank"
        rel="noopener noreferrer"
        [href]="file.thumbUrl || file.url"
        (click)="handlePreview(file, $event)"
      >
        <img
          *ngIf="isImageUrl(file); else noThumbTpl"
          [src]="file.thumbUrl || file.url"
          [attr.alt]="file.name"
        />
      </a>
    </ng-template>
    <ng-template #noThumbTpl
      ><i class="ant-upload-list-item-icon" nz-icon nzType="file" nzTheme="twotone"></i
    ></ng-template>
    <ng-template #noPicTpl
      ><i nz-icon [nzType]="file.status === 'uploading' ? 'loading' : 'paper-clip'"></i
    ></ng-template>
  </ng-template>
  <ng-template #preview>
    <ng-container *ngIf="file.url; else prevText">
      <a
        [href]="file.thumbUrl || file.url"
        target="_blank"
        rel="noopener noreferrer"
        [attr.download]="file.linkProps && file.linkProps.download"
        (click)="handlePreview(file, $event)"
        class="ant-upload-list-item-name"
        title="{{ file.name }}"
        >{{ file.name }}</a
      >
    </ng-container>
    <ng-template #prevText>
      <span
        (click)="handlePreview(file, $event)"
        class="ant-upload-list-item-name"
        title="{{ file.name }}"
        >{{ file.name }}</span
      >
    </ng-template>
  </ng-template>
  <div class="ant-upload-list-item-info">
    <span *ngIf="file.status === 'error'" nz-tooltip [nzTitle]="file.message">
      <ng-template [ngTemplateOutlet]="icon"></ng-template>
      <ng-template [ngTemplateOutlet]="preview"></ng-template>
    </span>
    <span *ngIf="file.status !== 'error'">
      <ng-template [ngTemplateOutlet]="icon"></ng-template>
      <ng-template [ngTemplateOutlet]="preview"></ng-template>
    </span>
  </div>
  <ng-container *ngIf="listType === 'picture-card' && file.status !== 'uploading'; else close">
    <span class="ant-upload-list-item-actions">
      <a
        *ngIf="showPreview(file)"
        [href]="file.thumbUrl || file.url"
        target="_blank"
        rel="noopener noreferrer"
        title="{{ locale.previewFile }}"
        [ngStyle]="!(file.url || file.thumbUrl) && { opacity: 0.5, 'pointer-events': 'none' }"
        (click)="handlePreview(file, $event)"
      >
        <i nz-icon nzType="eye-o"></i>
      </a>
      <i
        *ngIf="icons.showRemoveIcon"
        (click)="handleRemove(file, $event)"
        nz-icon
        nzType="delete"
        title="{{ locale.removeFile }}"
      ></i>
    </span>
  </ng-container>
  <ng-template #close>
    <i
      *ngIf="icons.showRemoveIcon"
      (click)="handleRemove(file, $event)"
      nz-icon
      nzType="close"
      title="{{ locale.removeFile }}"
    ></i>
  </ng-template>
  <div *ngIf="file.status === 'uploading'" class="ant-upload-list-item-progress">
    <nz-progress [nzPercent]="file.percent" [nzShowInfo]="false" [nzStrokeWidth]="2"></nz-progress>
  </div>
</div>
